<template>
    <div class="msg_page">
        <head-top head-title="消息列表" go-back='true'></head-top>
        <ul class="msg_list_ul">
            <router-link :to="{path: 'chat', query:{groupname: key}}" v-for="(value,key) in lastDict"
                         class=" msg_list_li">
                <!--  <img :src="item.goods_front_image">-->
                <section class="msg_item_right">
                    <span class="fromuser">{{value.from_user}}</span>
                    <span class="lastmsg">{{value.message}}</span>
                </section>

            </router-link>

        </ul>
        <transition name="loading">
            <loading v-show="showLoading"></loading>
        </transition>
        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>

    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'
    import headTop from 'src/components/header/head'
    import computeTime from 'src/components/common/computeTime'
    import loading from 'src/components/common/loading'
    import {getImgPath} from 'src/components/common/mixin'
    import footGuide from 'src/components/footer/footGuide'
    import {getMsgList} from 'src/service/getData'
    import {loadMore} from 'src/components/common/mixin'
    import {imgBaseUrl} from 'src/config/env'
    import {getStore, setStore} from '../../config/mUtils'

    export default {
        data() {
            return {
                msgList: null, //消息列表
                lastDict: {},
                offset: 0,
                preventRepeat: false,  //防止重复获取
                showLoading: true, //显示加载动画
                imgBaseUrl
            }
        },
        created() {
            this.initData();
        },
        // mounted() {
        //     this.initData();
        // },
        mixins: [loadMore],
        components: {
            headTop,
            footGuide,
            loading,
            computeTime,
        },
        computed: {
            ...mapState([
                'userInfo', 'geohash', 'group_name'
            ]),
        },
        methods: {
            ...mapMutations([
                // 'SAVE_msg'
            ]),
            //初始化获取信息
            async initData() {
                let usertoken = getStore('user_token')
                if (!usertoken) {
                    this.$router.push('/login');
                }
                //console.log('bbbbbbbbbbbbbb' + usertoken)
                if (usertoken) {
                    this.msgList = await getMsgList(this.userInfo.username);
                    console.log(this.msgList)

                    for (var group in this.msgList) {
                        var msglen = 0;
                        for (var msg in this.msgList[group]) {
                            setStore(group, msg);//存储聊天信息
                            msglen += 1
                        }
                        if (msglen >= 1) {
                            var lastmsg = this.msgList[group][msglen - 1];
                            this.lastDict[group] = lastmsg;
                            console.log('------------lastDict-------', this.lastDict)
                        }
                    }

                    this.hideLoading();
                } else {
                    this.hideLoading();
                }

            },

            //生产环境与发布环境隐藏loading方式不同
            hideLoading() {
                this.showLoading = false;
            },
        },
        watch: {
            userInfo: function (value) {
                if (value && value.user_id && !this.msgList) {
                    this.initData();
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    .msg_page {
        margin-bottom: 2rem;

        img {
            @include wh(3.9rem, 3.9rem);
            bmsg-radius: 0.1em;
        }
    }

    .msg_item_right {
        span {
            display: block;
            margin-bottom: 0.5em;
        }
        .fromuser{
            @include font(0.62em, 0.8rem, 'PingFangSC-Regular');
        }
        .lastmsg{
            @include font(0.42em, 0.5rem, 'PingFangSC-Regular');
            color: dimgrey;
            margin-left: 0.5em;
        }
    }

    .msg_list_ul {
        padding-top: 0.7rem;
        margin-top: 2.1em;

        .msg_list_li {
            background-color: #fff;
            display: block;
            margin-bottom: 0.5rem;
            overflow: hidden;
            bmsg-radius: 0.1em;
        }
    }

    .loading-enter-active, .loading-leave-active {
        transition: opacity .7s
    }

    .loading-enter, .loading-leave-active {
        opacity: 0
    }

    .router-slid-enter-active, .router-slid-leave-active {
        transition: all .4s;
    }

    .router-slid-enter, .router-slid-leave-active {
        transform: translate3d(2rem, 0, 0);
        opacity: 0;
    }
</style>
